<template>
  <x-tableHeader
      gap="10"
      :headerConfig="headerConfig"
      :form="searchForm"
      class="mb-2"
  ></x-tableHeader>
</template>

<script>
export default {
  name: "XTableHeader",
  /**
   *     headerConfig 配置
   *    label string 每一个键的名
   *    type string  input/select/button/datePicker
   *    lableWidth number 每一个label的宽度
   *    prop 每一个配置组件绑定的值 除了button 都是必填
   *    placeholder string 提示语
   *    disabled boolean 是否禁用
   *    clearable boolean 是否显示清除按钮
   *    multiple boolean 是否可以多选
   *    filterable boolean 是否可以搜索
   *    allowCreate boolean 是否可以创建
   *    method string 触发事件的事件名 除了按钮是 click input 是bulr 其他都是 change
   *    optionValue string 你要绑定的 value 值 默认是 value
   *    optionLabel string 要绑定的 label 值 默认是 label
   *    dateType string 日期选择的参 同 el-date-picker
   *    format string 默认 yyyy-MM-dd  看 el-date-picker
   *    valueFormat string 默认 yyyy-MM-dd  看 el-date-picker
   *    defaultTime string 默认的时间
  * */

  data() {
    return {
      searchForm :{},
      headerConfig : [
        {
          label: "注册时间：",
          type: "datePicker",
          dateType: "daterange",
          width: 280,
          prop: 'zcsj',
        },
        {
          label: "关键字：",
          type: "input",
          prop: 'gjz',
          lableWidth: "60",
          width: 180,
          placeholder: "请输入ID/名称",
        },
        {
          type: "button",
          text: "查询",
          method: "search",
        },
        {
          type: "button",
          btnType: " ",
          text: "重置",
          method: "reset",
        },]
    }
  },
}
</script>

<style scoped>

</style>
